import echarts from "echarts";
import { addCircleToChart } from "./base";

const elements = {};

let gradient = new echarts.graphic.RadialGradient(0.5, 0.5, 1, [
  {
    offset: 0,
    color: '#10bbe8'
  },
  {
    offset: 0.8,
    color: '#056984'
  },
  {
    offset: 1,
    color: '#10bbe8'
  },
]);

function optFromData(percentage) {
  let opt = {
    color: [gradient],
    title: [
      {
        text: percentage + '%',
        x: 'center',
        y: 'center',
        textStyle: {
          fontSize: 20,
          fontWeight: 200,
          color: '#04c9fc',
          textAlign: 'center',
        }
      }
    ],
    angleAxis: {
      max: 30,
      show: false
    },
    radiusAxis: {
      show: false,
      type: "category",
      data: ['a', 'b', 'c'],
    },
    xAxis: {
      show: false
    },
    yAxis: {
      show: false
    },
    polar: {
      radius: ['60%', '100%']
    },
    tooltip: {
      // trigger: 'item'
      show: false
    },
    legend: {
      show: false
    },
    series: [
      {
        name: 'a',
        type: 'bar',
        coordinateSystem: 'polar',
        barWidth: 15,
        label: {
          show: false,
          position: 'center'
        },
        emphasis: {
          label: {
            show: true,
            fontSize: '40',
            fontWeight: 'bold'
          }
        },
        labelLine: {
          show: false
        },
        data: [30]
      },
      {
        type: 'custom',
        data: [60, 65],
        renderItem: function (params, api) {
          let value = api.value(0)
          let cx = api.getWidth() / 2
          let cy = api.getHeight() / 2
          return {
            type: 'circle',
            shape: {
              cx: cx,
              cy: cy,
              r: value
            },
            style: {
              fill: null,
              stroke: '#03a1fc',
              opacity: 0.5,
            }

          }
        }
      }
    ]
  }


  return opt;

}


function draw(chart, name, value) {
  let opt = optFromData(name, value);

  chart.setOption(opt);
  addCircleToChart(chart, 60, 3, 0);
  addCircleToChart(chart, 65, 3, 180);

  elements.chart = chart;
}

function update(percentage) {
  let chart = elements.chart;
  let opt = optFromData(percentage);
  chart.setOption(opt);
}

export default {
  draw,
  update
}
